<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用值</title>
    <style>
        h1 {
            color: red;
            color: green;
            color: blue;

            color: rgb(255,0,0);
            color: rgb(0,255,0);
            color: rgb(0,0,255);

            color: rgb(128,128,128);

            color: #ff0000;
            color: #00ff00;
            color: #0000ff;

            color: #000000;
            color: #000;

            color: #ffffff;
            color: #fff;

            color: #808080;

        /* 二进制表示法取反能得到反色 */
            color: rgb(255,0,0);
            color: rgb(0,255,255);

            color: rgb(255,255,0);
            color: rgb(0,0,255);

            color: rgb(128,128,128);
            color: rgb(255,128,255);

            /* 不透明度: alpha 其中小数的整数部分`0`可以不写 */
            color: rgba(255,0,0,1);
            color: rgba(255,0,0,.8);
            color: rgba(255,0,0,.6);
            color: rgba(255,0,0,.4);
            color: rgba(255,0,0,.2);
        }
        /* 插入背景图片 */
        .d1 {
            background-image: url(img/mr.png);
            /* 注意: 背景图必须设置所在区域大小 */
            width: 50px;/* 设置div的宽度 */
            height: 100px;/* 设置div的高度 */
            /* 背景图尺寸 先规定x轴(宽) 再规定y轴(高) */
            background-size: 50px 100px;
            /* 设置背景色 没有图的地方显示颜色 */
            background-color: yellow;
        }

        .d2 {
        /*
            background-repeat: no-repeat 设置背景图的铺设方式 默认为平铺重复
            no-repeat 可以使其不重复
         */
            width: 300px;
            height: 300px;
            border: 5px solid #f00;
            background-image: url(img/mr.png);
            /* 不允许背景图重复 */
            background-repeat: no-repeat;
            /* 屏幕背景图的原点在选区左上角 因此向右走为X轴正方向 向下走为Y轴正方向 */
            background-position: 0 0;
            background-position: -50px 0;
            background-position: 0 -50px;
            background-position: 95px 50px;
            /* center正中间 top center 正中间最上方 left right bottom */
            background-position: center;
            /* 移动除图片宽度外剩余宽度的百分比 高度同理 */
            background-position: 50% 50%;
            background-position: 100% 100%;
            overflow: hidden;


        }

    </style>
</head>
<body>
<h1>测试颜色的标题</h1>

<hr>

<!-- .d*3 + tab 表示生成三个div标签 -->
<!--
    div为块级元素
    块级元素 默认宽度为屏幕宽度 但是高度默认为0
-->
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>